<template>
  <div class="app-container">


    <el-form :model="queryParamsTemplate" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="交费月份" prop="searchDate">
        <el-date-picker v-model="searchDate" clearable type="month" size="mini" placeholder="请选择交费月份">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <router-link :to="'/property/estate/rooms?estateId=' + queryParams.estateId" class="link-type">
          <el-button icon="el-icon-back" size="mini">
            返 回
          </el-button>
        </router-link>
      </el-col>
    </el-row>

    <el-col span="3">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <div style="background-color: #eeeeee" height="500px">
          <el-row :span="6">
            <el-form-item label="所在小区" prop="estateId">
              {{ form.estateName }}
            </el-form-item>
          </el-row>
          <el-row :span="6">
            <el-form-item label="房间号" prop="roomNo">
              {{ form.roomNo }}
            </el-form-item>
          </el-row>
          <el-row :span="6">
            <el-form-item label="房屋面积" prop="roomArea">
              {{ form.roomNo + '㎡' }}
            </el-form-item>
          </el-row>
          <el-row :span="6">
            <el-form-item label="房主姓名" prop="realName">
              {{ form.realName }}
            </el-form-item>
          </el-row>
          <el-row :span="6">
            <el-form-item label="房主手机号" prop="phoneNum">
              {{ form.phoneNum }}
            </el-form-item>
          </el-row>
        </div>
      </el-form>
    </el-col>

    <el-col span="20" fixed="right" style="margin-left: 40px">
      <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="所属小区" align="center" prop="estateName" width="110"/>
        <el-table-column label="姓名" align="center" prop="realName" width="100"/>
        <el-table-column label="户号" align="center" prop="roomNo" width="100"/>
        <el-table-column label="房屋类型" align="center" prop="roomType" width="110">
          <template slot-scope="scope">
            <div>
              <!--            房屋类型  0 - 高层 1 - 低层 2- 商业 3 - 别墅 4 - 其他-->
              <el-tag v-if="scope.row.roomType === 0" style="cursor: pointer" :type="''">高层</el-tag>
              <el-tag v-if="scope.row.roomType === 1" style="cursor: pointer" :type="''">低层</el-tag>
              <el-tag v-if="scope.row.roomType === 2" style="cursor: pointer" :type="''">商业</el-tag>
              <el-tag v-if="scope.row.roomType === 3" style="cursor: pointer" :type="''">别墅</el-tag>
              <el-tag v-if="scope.row.roomType === 4" style="cursor: pointer" :type="''">其他</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="房屋面积" v-if="queryParamsTemplate.feeType === 'wyf'" align="center" prop="roomArea"
                         width="110">
          <template slot-scope="scope">{{ scope.row.roomArea + '㎡' }}</template>
        </el-table-column>
        <el-table-column label="手机号" align="center" prop="phoneNum" width="110"/>
        <el-table-column label="车牌号" v-if="queryParamsTemplate.feeType === 'car'" align="center" prop="carNum"
                         width="100"/>
        <el-table-column label="交费状态" align="center" prop="state">
          <!--        0 - 未交费  1 - 已交费-->
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.state === 0" style="cursor: pointer" :type="'danger'">未交费</el-tag>
              <el-tag v-if="scope.row.state === 1" style="cursor: pointer" :type="'success'">已交费</el-tag>
              <el-tag v-if="scope.row.state === 2" style="cursor: pointer" :type="'success'">线下交费</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否车库" align="center" prop="state" width="100">
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.isGarage === 0" style="cursor: pointer" :type="''">住宅</el-tag>
              <el-tag v-if="scope.row.isGarage === 1" style="cursor: pointer" :type="'success'">车库</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="费用类型" align="center" prop="feeType" width="100">
          <!--        wyf - 物业费 rubbish - 垃圾处理费 car - 车位费  water - 水费 ，eletrict - 电费 ，jiaya - 加压费-->
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.feeType === 'wyf'" style="cursor: pointer" :type="''">物业费</el-tag>
              <el-tag v-if="scope.row.feeType === 'rubbish'" style="cursor: pointer" :type="'success'">垃圾处理费
              </el-tag>
              <el-tag v-if="scope.row.feeType === 'car'" style="cursor: pointer" :type="'warning'">车位服务费</el-tag>
              <el-tag v-if="scope.row.feeType === 'water'" style="cursor: pointer" :type="'success'">代收水费</el-tag>
              <el-tag v-if="scope.row.feeType === 'jiaya'" style="cursor: pointer" :type="''">供水转换费</el-tag>
              <el-tag v-if="scope.row.feeType === 'eletrict'" style="cursor: pointer" :type="'warning'">代收电费
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="费用时间" align="center" prop="yearNum" width="120">
          <template slot-scope="scope">
            {{ scope.row.yearNum + ' 年' + scope.row.monthNum + ' 月' }}
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center" prop="singlePrice" width="100">
          <template slot-scope="scope">
            <div>{{ (scope.row.singlePrice != null ? scope.row.singlePrice : 0.00) + '元' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="总价" align="center" prop="totalPrice" width="100">
          <template slot-scope="scope">
            <div>{{ (scope.row.totalPrice != null ? scope.row.totalPrice : 0.00) + '元' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center" prop="paidCount" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.feeType === 'car'">{{ parseInt(scope.row.paidCount) + '个' }}</div>
            <div v-else-if="scope.row.feeType === 'water'">{{ parseInt(scope.row.paidCount) + '³' }}</div>
            <div v-else>{{ scope.row.paidCount }}</div>
          </template>
        </el-table-column>
        <el-table-column label="已支付金额" align="center" prop="paidPrice" width="120">
          <template slot-scope="scope">
            <div>{{ (scope.row.paidPrice != null ? scope.row.paidPrice : 0.00) + '元' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="优惠金额" align="center" prop="youhuiPrice" width="100">
          <template slot-scope="scope">
            <div>{{ (scope.row.youhuiPrice != null ? scope.row.youhuiPrice : 0.00) + '元' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="备注信息" align="center" prop="remark" width="100"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                       v-hasPermi="['module:feeOrderTemp:edit']">修改
            </el-button>
            <!--          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"-->
            <!--                     v-hasPermi="['module:feeOrderTemp:remove']">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0"
                  :total="total"
                  :page.sync="queryParamsTemplate.pageNum"
                  :limit.sync="queryParamsTemplate.pageSize"
                  @pagination="getList"/>

    </el-col>

    <!-- 添加或修改小区内的房屋列信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="750px" append-to-body>
      <el-form ref="form" :model="formTemplate" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="费用状态" prop="state">
              <el-radio-group v-model="formTemplate.state" size="mini">
                <el-radio :value="0" :label="0">未交费</el-radio>
                <el-radio :value="1" :label="1">已交费</el-radio>
                <el-radio :value="2" :label="2">线下交费</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="所在小区" prop="estateId">
              <el-select v-model="formTemplate.estateId" placeholder="请选择小区" size="mini" style="width:100%;"
                         filterable clearable>
                <el-option v-for="estate in estatesOptions"
                           :key="estate.id"
                           :label="estate.estateName"
                           :value="estate.id"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="费用类型" prop="feeType">
              <el-select v-model="formTemplate.feeType" placeholder="请选择费用类型" size="mini" style="width:100%;"
                         filterable clearable>
                <el-option v-for="dict in feeTypeOptions"
                           :key="dict.dictValue"
                           :label="dict.dictLabel"
                           :value="dict.dictValue"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否车库" prop="isGarage">
              <el-radio-group v-model="formTemplate.isGarage" size="mini">
                <el-radio :value="0" :label="0">住宅</el-radio>
                <el-radio :value="1" :label="1">车库</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="房间户号" prop="roomNo">
              <el-input v-model="formTemplate.roomNo" placeholder="请输入房间户号" size="mini"/>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="formTemplate.feeType == 'wyf'">
            <el-form-item label="房屋面积" prop="roomArea">
              <el-input v-model="formTemplate.roomArea" placeholder="请输入房屋面积" size="mini">
                <template slot="append">㎡</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="年份" prop="yearNum">
              <el-input v-model="formTemplate.yearNum" placeholder="请输入年份" size="mini">
                <template slot="append">年</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="月份" prop="monthNum">
              <el-input v-model="formTemplate.monthNum" placeholder="请输入月份" size="mini">
                <template slot="append">月份</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="姓名" prop="realName">
              <el-input v-model="formTemplate.realName" placeholder="请输入姓名" size="mini"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="手机号" prop="phoneNum">
              <el-input v-model="formTemplate.phoneNum" placeholder="请输入手机号" size="mini"/>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="formTemplate.feeType == 'water' || formTemplate.feeType == 'eletrict'">
            <el-form-item label="起止数" prop="beginCount">
              <el-input v-model="formTemplate.beginCount" placeholder="请输入起数" size="mini" style="width:100px;"/>
              ~
              <el-input v-model="formTemplate.endCount" placeholder="请输入止数" size="mini" style="width:100px;"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="数量" prop="paidCount">
              <el-input v-model="formTemplate.paidCount" type="number" placeholder="请输入数量" size="mini"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="单价" prop="singlePrice">
              <el-input v-model="formTemplate.singlePrice" type="number" placeholder="请输入单价" size="mini">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="当前应交" prop="totalPrice">
              <el-input v-model="formTemplate.totalPrice" type="number" placeholder="请输入当前月份应交" size="mini">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="优惠金额" prop="youhuiPrice">
              <el-input v-model="formTemplate.youhuiPrice" type="number" placeholder="请输入优惠金额" size="mini">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="formTemplate.feeType == 'car'">
            <el-form-item label="车牌号" prop="carNum">
              <el-input v-model="formTemplate.carNum" placeholder="请输入车牌号" size="mini"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注信息" prop="remark">
              <el-input type="textarea" rows="2" v-model="formTemplate.remark" placeholder="请输入备注信息"
                        size="mini"/>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" size="mini" v-if="formTemplate.isCanEdit === 1" type="primary"
                   @click="submitForm">确 定
        </el-button>
        <el-button @click="cancel" size="mini">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {listRoom, getRoom, delRoom, addRoom, updateRoom, exportRoom} from "@/api/module/estate/room";
import {
  listTemplate,
  getTemplate,
  delTemplate,
  addTemplate,
  updateTemplate,
  exportTemplate,
  importTemplateWyf,
  importTemplateSdJ
} from "@/api/module/estate/wyfTemplate";

import {listAllEstate} from "@/api/module/estate/estate";

export default {
  name: "Room",
  data() {
    return {
      activeName: undefined,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      dateRange: [],
      // 小区内的房屋列信息表格数据
      templateList: [],
      estatesOptions: [],
      feeTypeOptions: [],
      yearList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      searchDate: undefined,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roomId: undefined,
        estateId: undefined,
      },
      queryParamsTemplate: {
        pageNum: 1,
        pageSize: 10,
        roomId: undefined,
        estateId: undefined,
        feeType: undefined,
        yearNum: undefined,
        monthNum: undefined,
        state: undefined,
      },
      // 表单参数
      form: {},
      formTemplate: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.queryParams.estateId = this.$route.query.estateId ? parseInt(this.$route.query.estateId) : 0;
    this.queryParams.roomId = this.$route.query.roomId ? parseInt(this.$route.query.roomId) : 0;
    this.queryParamsTemplate.state = this.$route.query.state ? parseInt(this.$route.query.state) : undefined;
    this.getRoomDetail(this.queryParams.roomId);

    this.queryParamsTemplate.estateId = this.$route.query.estateId ? parseInt(this.$route.query.estateId) : 0;
    this.queryParamsTemplate.roomId = this.$route.query.roomId ? parseInt(this.$route.query.roomId) : 0;


    this.getDicts("wyf_fee_type").then(response => {
      this.feeTypeOptions = response.data;
      console.log('this.feeTypeOptions[0].dictValue', this.feeTypeOptions[0].dictValue);

      this.getList();
    });
  },
  methods: {
    /** 修改按钮操作 */
    getRoomDetail(roomId) {
      this.reset();
      getRoom(roomId).then(response => {
        this.loading = false;
        this.form = response.data;
      });
    },
    /** 查询小区内的房屋列信息列表 */
    getList() {
      this.loading = true;
      console.log('this.queryParamsTemplate', this.queryParamsTemplate);
      listTemplate(this.queryParamsTemplate).then(response => {
        this.templateList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length
    },
    getEstateList() {
      listAllEstate().then(response => {
        this.estatesOptions = response.data;
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true;
      this.getEstateList();
      const id = row.id || this.ids;
      getTemplate(id).then(response => {
        this.loading = false;
        this.formTemplate = response.data;
        if (this.formTemplate.feeType == 'car') {
          this.formTemplate.paidCount = parseInt(this.formTemplate.paidCount + '');
        }
        this.open = true;
        this.title = "修改物业费相关费用的模板";
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formTemplate = {
        id: undefined,
        estateId: this.queryParams.estateId,
        estateName: undefined,
        realName: undefined,
        roomNo: undefined,
        feeOrderId: undefined,
        roomArea: undefined,
        roomId: this.queryParams.roomId,
        phoneNum: undefined,
        carNum: undefined,
        feeType: undefined,
        isGarage: undefined,
        yearNum: undefined,
        roomType: undefined,
        monthNum: undefined,
        singlePrice: undefined,
        totalPrice: undefined,
        paidPrice: undefined,
        youhuiPrice: undefined,
        unPayPrice: undefined,
        paidCount: undefined,
        isBand: undefined,
        bangWxUserId: undefined,
        beginCount: undefined,
        endCount: undefined,
        state: undefined,
        remark: undefined,
        payDate: undefined,
        paidMonth: undefined,
        createTime: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParamsTemplate.pageNum = 1;
      console.log('searchDate', this.searchDate);


      // var begin = this.dateRange[0];
      // var begin_year = begin.getFullYear();
      // var begin_month = begin.getMonth() + 1;
      // var begin_day = "1";
      //
      // var beginDate = begin_year + "-" + begin_month + "-" + begin_day;
      //
      //
      // var end = this.dateRange[1];
      // var end_year = end.getFullYear();
      // var end_month = end.getMonth() + 1;
      // var end_day = new Date(end_year, end_month, 0).getDate();
      // var endDate = end_year + "-" + end_month + "-" + end_day;


      var year = this.searchDate.getFullYear();
      var month = this.searchDate.getMonth() + 1;
      console.log('year', year);
      console.log('month', month);

      this.queryParamsTemplate.yearNum = year;
      this.queryParamsTemplate.monthNum = month;
      // month
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateTemplate(this.formTemplate).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addTemplate(this.formTemplate).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除小区内的房屋列信息编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.loading = true;
        return delTemplate(ids);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有小区内的房屋列信息数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportTemplate(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {
      });
    },
  }
};
</script>
